<template>
	<view>
		<view>
			<!-- 选中之后的数据展示 -->
			<view class="inputPlaceholder" v-if='value' @tap="changejiantou">
				<text style="color:black;">{{ value }}</text>
				<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
				<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
			</view>
			<!-- 未选择时的Placeholder展示 -->
			<view class="inputPlaceholder" v-else @tap="changejiantou">
				<text>请选择司机类别</text>
				<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
				<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
			</view>
			<!-- 下拉展开后的可选择内容 -->
			<view class="content" v-if='!isjiantou'>
				<view :class="item.id === valueid ? 'active' : ''" v-for="item in selectcontent" :key="item.id"
					@tap="changecontent" :data-datavalue="item">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';

	const isjiantou = ref(true);
	const selectcontent = ref([
		{ id: 1, name: "智能排序" },
		{ id: 2, name: "离我最近" },
		{ id: 3, name: "运价最高" },
		{ id: 4, name: "运价最短" },
	]);
	const value = ref("智能排序");
	const valueid = ref(1);

	// 下拉框收起和下拉
	const changejiantou = () => {
		isjiantou.value = !isjiantou.value;
	};

	const changecontent = (e) => {
		const datavalue = e.currentTarget.dataset.datavalue;
		value.value = datavalue.name;
		valueid.value = datavalue.id;
		isjiantou.value = true;
	};
</script>

<style scoped>
	.inputPlaceholder {
		width: 160rpx;
		height: 45rpx;
		border: 1px solid #DEDEDE;
		padding: 8rpx 40rpx 8rpx 20rpx;
		margin-left: 16rpx;
		color: #CBCBCB;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.jiantou1 {
		position: absolute;
		right: 10rpx;
		top: 8rpx;
	}

	.content {
		width: 160rpx;
		max-height: 400rpx;
		position: absolute;
		top: 62rpx;
		left: 16rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);
		padding: 20rpx;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.content>view {
		padding: 10rpx 0;
	}

	.active {
		color: #56D88A;
	}
</style>
